<template>
  <div class="privacySetting">
    <van-nav-bar title="隐私设置" left-arrow @click-left="$router.push({name: 'profile'})" />
    <van-cell-group class="privacySettingGroup">
      <van-cell class="privacy-password">
        <template #default>
          <div class="title" v-if="hasPrivacyPwd === 'false'">立即设置隐私密码</div>
          <div class="title" v-else>您已设置隐私密码</div>
          <div class="tip-label van-cell__label">隐私密码与您的认证信息相关联</div>
          <div class="btns">
            <div v-if="hasPrivacyPwd === 'false'">
              <span @click="$router.push({name: 'privacyPwd', params: {type: 1}})">立即设置</span>
            </div>
            <div v-else>
              <span @click="smsCodeDialogShow = true">查看</span>
              <span @click="$router.push({name: 'privacyPwd', params: {type: 2}})">修改</span>
            </div>
          </div>
        </template>
      </van-cell>
      <van-cell class="privacy-phone">
        <template #default>
          <div class="title">是否允许他人查看我的手机号</div>
          <div class="switch">
            <span class="label">允许</span>
            <van-switch v-model="phoneSwitchChecked" size="20" @change="phoneSwitchChange" />
          </div>
        </template>
      </van-cell>
    </van-cell-group>

    <van-dialog
      v-model="smsCodeDialogShow"
      title="验证码校验"
      show-cancel-button
      :before-close="onBeforeClose"
      confirmButtonColor="#1989FA"
      @confirm="onConfirm"
    >
      <van-form class="dialog-content" ref="smsCodeForm">
        <van-field autocomplete="off" v-model="account" type="number" readonly label="手机号" name="account">
          <template #button>
            <van-button
              v-show="showcount"
              size="small"
              type="info"
              :disabled="disabledStatus"
              @click="sendCode(2)"
              native-type="button"
              >发送验证码</van-button
            >
            <van-button v-show="!showcount" size="small" type="info" disabled @click="sendCode(2)" native-type="button"
              >{{ count }} s</van-button
            >
          </template>
        </van-field>
        <van-field
          autocomplete="off"
          clearable
          v-model="code"
          type="number"
          name="code"
          label="验证码"
          placeholder="请输入验证码"
          :rules="[{required: true, message: '请填写验证码'}]"
          maxlength="6"
        />
      </van-form>
    </van-dialog>

    <van-popup :style="{'min-height': '30%', width: '90%'}" v-model="showpop">
      <div class="slideverify" v-show="isShowSlide">
        <div id="verifyCodeDemo">
          <p id="picyzm" style="margin:10px"></p>
          <div style="text-align:center;margin-bottom:5px;margin-right:10px;">点击图片刷新</div>
          <van-field
            autocomplete="off"
            v-model="picyzmValue"
            style="text-align:center;"
            placeholder="请输入4位验证码"
          />
          <div style="text-align: center;">
            <van-button style="margin:10px;width:65px;" size="small" @click="cancelVerify()">取消 </van-button>
            <van-button style="margin:10px;width:65px;" size="small" type="info" @click="handleVerify()"
              >验证
            </van-button>
          </div>
        </div>
      </div>
    </van-popup>
    <van-popup round :close-on-click-overlay="false" v-model:show="showPopup" bind:close="onClose">
      <!-- <verCode ref="slideblock" @popFUNC="popFUNC"></verCode> -->
      <slide-verify
      :l="42"
      :r="10"
      :w="210"
      :h="155"
      @success="onSuccess"
      @fail="onFail"
      @refresh="onRefresh"
      slider-text="向右滑动"
    ></slide-verify>
    </van-popup>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import {Toast, Dialog} from 'vant'
import SlideVerify from '@/components/slideImg'
import verCode from '@/components/verCode' //引入
import {GVerify} from '@/utils/gVerify.js'

export default {
  name: 'privacySetting',
  data() {
    return {
      showPopup: false,
      hasPrivacyPwd: false,
      phoneSwitchChecked: true,
      smsCodeDialogShow: false,

      isShowSlide: false,
      showpop: false,
      picyzmValue: '',
      verifyCode: null,
      showcount: true,
      count: '',
      timer: null,
      disabled: true,
      show: true,

      account: '', // 手机号
      code: '' // 验证码
    }
  },
  components: {
    verCode,
    SlideVerify //注册组件
  },
  computed: {
    ...mapGetters(['allUserInfo']),

    disabledStatus() {
      let result
      if (this.account && this.account.length === 11) {
        result = !this.disabled
      } else {
        result = this.disabled
      }
      return result
    }
  },
  mounted() {
    if (!this.allUserInfo || !this.allUserInfo.account) {
      Toast('登录信息已过期，请重新登录')
    }
    this.account = this.allUserInfo.account
  },
  created() {
    this.getHasPrivacyPwd()
    this.getUserAllInfo()
  },
  methods: {
    hideSlide() {
      setTimeout(() => {
        this.isShowSlide = false
      }, 500)
    },
    sendSmsCode() {
      setTimeout(() => {
        this.showpop = false
        this.getQode()
      }, 500)
    },
    async getQode() {
      // 请求参数
      const TIME_COUNT = 60

      const params = {phone: this.account, type: 5}

      const res = await this.$api.user.reqSendCode(params)

      if (res.code === 200) {
        Toast(res.data)
        if (!this.timer) {
          this.count = TIME_COUNT
          this.showcount = false

          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--
            } else {
              this.showcount = true
              clearInterval(this.timer)
              this.timer = null
            }
          }, 1000)
        }
      } else {
        Toast(res.msg)
      }
    },
    sendCode(index) {
       this.getQode()
      // this.showPopup = true
    },
    popFUNC() {
      this.showPopup = false
      this.getQode()
    },
    onSuccess() {
      this.showPopup = false
      this.getQode()
    },

    //验证码
    creatGVerify() {
      //初始化验证码
      if (!this.verifyCode) {
        this.verifyCode = new GVerify({
          id: 'picyzm',
          type: 'blend'
        })
      }
    },
    handleVerify() {
      let res = this.verifyCode.validate(this.picyzmValue)
      if (res) {
        this.sendSmsCode()
      } else {
        Toast('验证码错误')
      }
    },
    cancelVerify() {
      this.showpop = false
      this.verifyCode = null
      this.picyzmValue = ''
    },

    async getHasPrivacyPwd() {
      const res = await this.$api.user.hasPrivacyPwd()
      if (res.code === 200) {
        this.hasPrivacyPwd = res.data
      }
    },

    onConfirm() {
      console.log('onConfirm')

      this.$refs['smsCodeForm']
        .validate()
        .then(() => {
          let params = {
            code: this.code
          }

          // TODO: ajax 查看隐私密码
          this.$api.user.viewPrivacyPwd(params).then(res => {
            if (res.code === 200) {
              this.smsCodeDialogShow = false
              Dialog.alert({
                title: '您的隐私密码为：',
                message: res.data,
                confirmButtonColor: '#1989FA'
              }).then(() => {
                // on close
              })
            }
          })
        })
        .catch(e => {
          console.log(e)
        })
    },

    onBeforeClose(action, done) {
      if (action === 'confirm') {
        return done(false)
      }

      // this.account = ''
      this.code = ''

      return done()
    },

    phoneSwitchChange(value) {
      let params = {
        val: value
      }
      this.$api.user.setMobilePub(params).then(res => {
        if (res.code === 200) {
          Toast('设置成功!')
        }
      })
    },

    async getUserAllInfo() {
      const res = await this.$api.user.reqUserAllInfo()
      if (res.code === 200) {
        this.phoneSwitchChecked = res.data.mobilepublic
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.privacySetting {
  .privacy-password {
    .btns {
      display: inline-block;
      width: 100%;
      text-align: center;
      margin-top: 0.2rem;
      color: #1989fa;

      span {
        margin: 0 16px;
        font-size: 0.385rem;
      }
    }
  }

  .switch {
    margin-top: 0.2rem;
    float: right;
    display: flex;
    text-align: center;

    .label {
      margin-right: 16px;
    }
  }

  .dialog-content {
    margin: 0.25rem 0;
  }
}
</style>
<style>
.privacySetting .van-field__label {
  width: 4.8em !important;
}
</style>
